<template>
    <div class="wrapper" v-if="isShow" @click="cancelChoiceClick">
        <div class="wheel-box">
            <div class="title">
                <text class="title-txt" @click="getValue">完成</text>
            </div>

            <div class="wheel-wrapper">
                <wheel class="wheel" :items="itemList" @scroll="onscroll"></wheel>
            </div>
        </div>
    </div>
</template>

<style scoped>
    .wrapper {
        position: fixed;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        background-color: rgba(0,0,0,0.3);
    }
    .wheel-box {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: #fff;
    }
    .title {
        height: 98px;
        background-color: #f8f8f8;
        flex-direction: row;
        justify-content: flex-end;
        align-items: center;
    }
    .title-txt {
        padding-left: 90px;
        padding-right: 30px;
        font-size: 30px;
        color: #313131;
        font-family: msyhl;
    }
    .wheel-wrapper {
        width: 1080px;
        height: 492px;
        justify-content: center;
        align-items: center;
    }
    .wheel {
         width: 980px;
         height: 400px;
    }
</style>

<script>
    let animation = weex.requireModule('animation');
    export default{
        props: {
            isShow: {
                type: Boolean,
                default: false
            },
            itemList: {
                type: Array,
                default: []
            }
        },
        data(){
            return {
                selectedVal: null
            }
        },
        methods: {
            onscroll(e){
                this.selectedVal = e.value || "";
            },
            getValue(){
                this.$parent.isShow = false;
                this.$emit("getValue",this.selectedVal);
            },
            cancelChoiceClick(e){
                this.$parent.isShow = false;
            }
        }
    }
</script>
